<template>
  <div class="edit-table-container">
    <el-table :data="getTableData" border fit highlight-current-row>
      <el-table-column label="ID" prop="id" width="50px"></el-table-column>
      <el-table-column label="Date" prop="date" width="150px"></el-table-column>
      <el-table-column label="Author" prop="author" width="100px"></el-table-column>
      <el-table-column label="Importance" width="150px">
        <template slot-scope="scope">
          <i class="el-icon-star-on star" v-for="(item, index) in scope.row.importance" :key="index"></i>
        </template>
      </el-table-column>
      <el-table-column label="Readings" prop="readings" width="100px"></el-table-column>
      <el-table-column label="Status" width="100px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status !== 1" type="success" size="mini">published</el-tag>
          <el-tag v-else type="info" size="mini">draft</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <div class="edit-box">
              <el-input v-model="scope.row.title"></el-input>
              <el-button type="warning" class="el-icon-refresh-left cancel" size="mini" @click="cancel(scope.row)">cancel</el-button>
            </div>
          </template>
          <span v-else>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="Drag" width="100px">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.edit" class="el-icon-edit edit-btn" type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button v-else type="success" size="mini" @click="editOk(scope.row)">ok</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    }
  },
  computed: {
    getTableData() {
      return this.$store.state.tableData
    }
  },
  methods: {
    edit(rowInfo) {
      this.$set(rowInfo, 'edit', true)
      console.log(rowInfo)
    },
    cancel(rowInfo) {
      this.$set(rowInfo, 'edit', false)
      this.$message({ type: 'info', message: '取消了修改操作', duration: 2000 })
    },
    editOk(rowInfo) {
      this.$set(rowInfo, 'edit', false)
      this.$message({ type: 'success', message: '修改成功', duration: 2000 })
    }
  }
}
</script>

<style scoped>
  .star {
    font-size: 20px;
  }
  .edit-box {
    font-display: flex;
    align-items: center;
  }
  .el-input {
    width: 70%;
  }
  .cancel {
    margin-left: 10px;
    width: 22%;
  }
</style>
